<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="admin/base :: commonHead(_,_)"></head>

<!--<link rel="stylesheet" th:href="@{/js/jconfirm/jquery-confirm.min.css}">-->
<!--<script th:src="@{/js/ckeditor/ckeditor.js}"></script>-->

<link href="https://cdn.bootcdn.net/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.css" rel="stylesheet">
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>


<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside th:replace="admin/base :: commonMenu"></aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header th:replace="admin/base :: commonHeader"></header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <div class="edit-avatar">
                                    <img alt="..." class="img-avatar" src="images/users/avatar.jpg"
                                         th:src="${user.avatarUrl}">
                                    <div class="avatar-divider"></div>
                                    <div class="edit-avatar-content">
                                        <input id="img-input" name="image" style="display: none" type="file" value=""/>
                                        <button class="btn btn-default" id="btn-img">修改头像</button>
                                        <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                                    </div>
                                </div>
                                <hr>
                                <form class="site-form" method="post" option="#">

                                    <div class="form-group">
                                        <label for="username">用户名</label>
                                        <input class="form-control" disabled="disabled" id="username" name="username"
                                               th:value="${user.username}" type="text" value="lightyear"/>
                                    </div>
                                    <div class="form-group">
                                        <label for="nickname">昵称</label>
                                        <input class="form-control" id="nickname" name="nickname" placeholder="输入您的昵称"
                                               th:value="${user.nickname}" type="text" value="笔下光年">
                                    </div>
                                    <div class="form-group">
                                        <label for="email">邮箱</label>
                                        <input aria-describedby="emailHelp" class="form-control" id="email" name="email"
                                               placeholder="请输入正确的邮箱地址" th:value="${user.email}" type="email"
                                               value="3331653644@qq.com">
                                        <small class="form-text text-muted" id="emailHelp">请保证您填写的邮箱地址是正确的。</small>
                                    </div>
                                    <div class="form-group">
                                        <label>简介</label>
                                        <textarea cols="80" id="editor1" name="text"
                                                  rows="10">[[${user.text}]]</textarea>
                                        <script>
                                            CKEDITOR.replace("editor1");
                                        </script>
                                    </div>
                                </form>
                                <button class="btn btn-primary" id="btn-profile" type="submit">保存</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
        </aside>
    </div>
</div>

<footer th:replace="admin/base :: commonFooter"></footer>

<!--<script th:src="@{/js/bootstrap-notify.min.js}" type="text/javascript"></script>-->
<!--<script th:src="@{/js/lightyear.js}" type="text/javascript"></script>-->
<!--<script th:src="@{/js/jconfirm/jquery-confirm.min.js}"></script>-->

<script>

    $("#btn-profile").click(function () {
        // 在提交表单前对表单数据进行更新
        for (instance in CKEDITOR.instances) {
            CKEDITOR.instances[instance].updateElement();
        }

        const formObject = {};
        const formArray = $(".site-form").serializeArray();

        // 获取头像url
        formObject['avatarUrl'] = $('.img-avatar').attr('src');
        // 获取form表达数据
        $.each(formArray, function (i, item) {
            formObject[item.name] = item.value;
        });

        lightyear.loading('show');
        // 假设ajax提交操作
        $.ajax({
            type: "POST",
            url: "/admin/profile/save",
            contentType: "application/json",
            dataType: "json",
            timeout: 50000,
            data: JSON.stringify(formObject),
            async: false,
            success: function (data) {
                lightyear.loading('show');
                // 假设ajax提交操作
                if (data.code === 1) {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.url("/admin/profile/info");  // 先指定跳转链接
                        lightyear.notify(data.msg, 'success', 300);
                    }, 1e3)
                } else {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.notify(data.msg, 'danger', 100);
                    }, 1e3)
                }

            },
            error: function (err) {
                setTimeout(function () {
                    lightyear.loading('hide');
                    lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
                }, 1e3)
            }
        })
    })
</script>
<script>
    // 点击按钮点击input标签
    $("#btn-img").click(function () {
        $("#img-input").click();
    })

    // 获取input file数据
    $("#img-input").change(function () {
        var formData = new FormData();
        formData.append('img', document.getElementById('img-input').files[0]);

        $.ajax({
            url: "/admin/profile/uploadImg",
            type: "POST",
            data: formData,
            contentType: false,//用于对data参数进行序列化处理 这里必须false
            processData: false,//必须*/
            success: function (data) {
                if (data.code === 1) {
                    $(".img-avatar").attr("src", data.data.src).show();
                } else {
                    alert(data.msg);
                }
            },
            error: function (data) {
                alert("上传失败")
            }
        });
    })
</script>
</body>
</html>